<template>
    <el-card>
        <!-- 查询表单 -->
        <el-form :model="searchModel" ref="searchForm" label-width="80px" :inline="true" size="small">
            <el-form-item>
                <el-input v-model="searchModel.academyName" placeholder="输入学院名查询"></el-input>
            </el-form-item>
            <el-button icon="el-icon-search" type="primary" size="small" @click="search(pageNo,pageSize)">查询</el-button>
            <el-button icon="el-icon-refresh" size="small" @click="resetValue()">重置</el-button>
            <el-button icon="el-icon-plus" type="success" size="small" @click="addAcademy()">添加</el-button>
            
        </el-form>
        <!-- 数据表格 -->
        <el-table :data="academyList" border stripe style="width:100%, margin-bottom:20px" row-key="id">
            <el-table-column
             type="index"
             width="50"></el-table-column>
            <template v-for="item in tableProp">
                <el-table-column
                 :prop="item.prop" :label="item.label"
                 :formatter="item.formatter">

                </el-table-column>
            </template>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button icon="el-icon-edit" type="primary" size="mini" @click="updateAcademy(scope.row)">编辑</el-button>
                    <el-button icon="el-icon-delete" type="danger" size="mini" @click="deleteAcademy(scope.row)">删除</el-button>
                </template>
            </el-table-column>
           
        </el-table>
    <!-- 分页工具栏 -->
        <el-pagination @size-change="assignSizeChange" @current-change="assignCurrentChange"
                    :current-page.sync="pageNo" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" background>
            </el-pagination>
            <!-- 添加弹窗 -->
            <system-dialog :title="academyDialog.title"
             :visible="academyDialog.visible" :width="academyDialog.width"
             :height="academyDialog.height" @onClose="onClose"
             @onConfirm="onConfirm">
                <div slot="content">
                    <el-form :model="academyInfo" ref="academyInfoForm"
                        :rules="rules" label-width="80px">
                        <el-form-item label="学院名称" prop="academyName">
                            <el-input v-model="academyInfo.academyName" style="width:160px"></el-input>
                        </el-form-item>
                        <el-form-item label="院长" prop="deanId">
                            <el-select v-model="academyInfo.deanId" clearable placeholder="请选择院长" style="width:160px">
                            <el-option
                            v-for="item in deanList"
                            :key="item.id"
                            :label="item.nickName"
                            :value="item.id"
                            >
                            </el-option>
                        </el-select>
                        </el-form-item>
                        <el-form-item label="副院长" prop="associateDeanId">
                            <el-select v-model="academyInfo.associateDeanId" clearable placeholder="请选择院长" style="width:160px">
                            <el-option
                            v-for="item in deanList"
                            :key="item.id"
                            :label="item.nickName"
                            :value="item.id"
                            >
                            </el-option>
                        </el-select>
                        </el-form-item>
                        <el-form-item label="成立时间" prop="academyBuildTime">
                        <el-date-picker v-model="academyInfo.academyBuildTime" type="date" placeholder="选择日期"
                            format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" style="width:160px">
                        </el-date-picker>
                        </el-form-item>
                    </el-form>
                </div>
            </system-dialog>
    </el-card>
</template>

<script>
import academyApi from '@/api/academy'
import userApi from '@/api/user'
import SystemDialog from '@/components/system/SystemDialog.vue'

export default{
    name:'college',
    components:{
        SystemDialog
    },
    data() {
        return {
            userList:[],//用户列表
            academyList:[],//学院列表
            academyDialog:{
                title:'',
                visible:false,
                width:300,
                height:250
            },
            academyInfo:{
                id:null,
                academyName:'',
                deanId:null,
                associateDeanId:null,
                academyBuildTime:null,
            },
            tableProp:[
                { prop:'academyName', label:'学院名称'},
                { prop:'deanId', label:'院长',
                    formatter:value => {
                        const deanName = this.userList.find(user => user.id === value.deanId)
                        return deanName !== undefined ? deanName.nickName : '-'
                    }
            },
                { prop:'associateDeanId', label:'副院长',
                    formatter:value => {
                            const assName = this.userList.find(user => user.id === value.associateDeanId)
                            return assName !== undefined ? assName.nickName : '-'
            }},
                { prop:'academyBuildTime', label:'建院时间'},
                { prop:'updateTime', label:'修改时间'},
            ],
            searchModel:{
                academyName:'',
                pageNo:1,
                pageSize:10
            },
            deanList:[],
            rules:{academyName: [{ required: true, trigger: "blur", message: "请输入学院名" }],
            deanId: [{ required: true, trigger: "change", message: "请选择院长" }],
            associateDeanId: [{ required: true, trigger: "change", message: "请选择副院长" }],
            createTime: [{ required: true, trigger: "change", message: "请选择建院日期" }],},
            pageNo:1,
            pageSize:10,
            total:0,
        }
    },
    methods: {
        async search(pageNo=1,pageSize=10){
            this.searchModel.pageNo = pageNo
            this.search.pageSize = pageSize
            let res = await academyApi.getAcademyList(this.searchModel)
            if(res.success){
                this.academyList = res.data.records
                this.total = res.data.total
            }

        },
        async getUserList(){
            let res = await userApi.getUserList()
            if(res.success){this.userList = res.data.records}
        },
        resetValue(){
            this.searchModel = {}
            this.search()
        },
        assignSizeChange(size) {
            this.pageSize = size; //将每页显示的数量交给成员变量
            this.search(this.pageNo, size);
        },
        assignCurrentChange(page) {
            this.pageNo = page;
            //调用查询方法
            this.search(page, this.pageSize);
        },
        addAcademy(){
            this.$resetForm('academyInfoForm',this.academyInfo)
            this.academyDialog.title = '添加学院'
            this.academyDialog.visible = true
        },
        onClose(){
            this.academyDialog.visible = false
        },
        onConfirm(){
            this.$refs.academyInfoForm.validate(async (valid) => {
                if(valid){
                    let res = null
                    if(this.academyInfo.id === ''){
                        res = await academyApi.addAcademy(this.academyInfo)
                    }else{
                        // 修改
                        res = await academyApi.updeteAcademyById(this.academyInfo)
                    }
                    if(res.success){
                        this.$message.success(res.message)
                        this.search()
                        this.academyDialog.visible = false
                    }else
                    this.$message.errror(res.message)
                }
            })
        },
        updateAcademy(row){
            this.academyDialog.title = '修改学院'
            this.academyDialog.visible = true
            this.$objCopy(row,this.academyInfo)
        },
        async deleteAcademy(row){
            let confirm = await this.$myconfirm("确定删除吗？")
            if(confirm){
                let res = await academyApi.deleteAcademyById({ id : row.id})
                if (res.success) {
                    this.search(this.pageNo, this.pageSize)
                    return this.$message.success(res.message)
                } else
                    return this.$message.error(res.message)
            }
        },
        async getDeanList(){
            let res = await userApi.findUserByRoleId({roleId:4})
            if(res.success){
                this.deanList = res.data
            }
        }
    },
    created() {
        this.search()
        this.getUserList()
        this.getDeanList()
    },
}

</script>

<style lang="scss" scoped>
    
</style>